<template>
    <div class="app-container">
        <div class="table-container">
            <el-table ref="orderTable" :data="list" style="width: 100%;" v-loading="listLoading" border>
                <el-table-column v-for="(item, index) in column" :label="item.name" :key="index" :width="item.width"
                    :align="item.align">
                    <template slot-scope="scope">{{ item.render ? item.render(scope.row[item.key]) : scope.row[item.key] }}
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="100" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" @click="handleCompanyDetail(scope.row)">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="pagination-container">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                layout="total, sizes,prev, pager, next,jumper" :current-page.sync="listQuery.pageNum"
                :page-size="listQuery.pageSize" :page-sizes="[5, 10, 15]" :total="total">
            </el-pagination>
        </div>
    </div>
</template>
<script>
import { fetchFundList } from '@/api/fund.js'

import { formatDate } from '@/utils/date.js'
const defaultListQuery = {
    pageNum: 1,
    pageSize: 10,
};
// 投资标的名称	Ticker	投资历史	所属行业	持仓数量	市场价值（美金）	%占组合比例	更新时间	与上次更新的持仓变化%	详情

const column = [
    {
        name: '投资标的名称',
        key: 'fundName',
    }, {
        name: 'Ticker',
        key: 'ticker',
    }, {
        name: '投资历史',
        key: 'history',
    }, {
        name: '持仓数量',
        key: 'openPosition',
    }, {
        name: '市场价值（美金）',
        key: 'market',
    }, {
        name: '%占组合比例',
        key: 'scale',
        render: (value) => {
            return (value || 0) + "%"
        }
    }, {
        name: '更新时间',
        key: 'updateTime',
        render: (value) => {
            return value ? formatDate(new Date(value), 'yyyy-MM-dd') : '暂无'
        }
    },
    {
        name: '与上次更新的持仓变化%',
        key: 'change',
        render: (value) => {
            return (value || 0) + "%"
        }
    }

]


export default {
    name: "orderList",
    components: {},
    data() {
        return {
            listQuery: Object.assign({}, defaultListQuery),
            listLoading: true,
            list: [],
            total: null,
            column,
            currentDetail: {},
            currentCompanyId: ''
        }
    },
    mounted() {
        const route = this.$route;
        if (route.name === 'companyDetail') {
            this.listQuery.companyId = route.query.id
            this.currentCompanyId = route.query.id
        }
        this.getList();
    },
    methods: {
        handleSearchList() {
            this.listQuery.pageNum = 1;
            this.getList();
        },
        handleCompanyDetail(row) {
            const query = {
                id: row.fundId,
                companyId: this.currentCompanyId
            }
            this.$router.push({ path: '/company/fundDetail', query: query })
        },
        handleSizeChange(val) {
            this.listQuery.pageNum = 1;
            this.listQuery.pageSize = val;
            this.getList();
        },
        getList() {
            this.listLoading = true;
            fetchFundList({ ...this.listQuery, companyId: this.currentCompanyId, isQuit: 0 }).then(response => {
                this.listLoading = false;
                this.list = response.data.list;
                this.total = response.data.total;
            });
        },
        handleCurrentChange(val) {
            this.listQuery.pageNum = val;
            this.getList();
        },
    }
}
</script>
<style scoped>
.input-width {
    width: 203px;
}

.detail-modal {
    width: 98%;
    height: calc(100vh - 120px);
    overflow-y: scroll;
}
</style>


